<!doctype html>
<html>
  <head>
    <script src="jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="jqtouch/jqtouch.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="jqtouch/jqtouch.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="themes/apple/theme.css" type="text/css" media="screen" title="no title" charset="utf-8">
    
    <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
    
    <script type="text/javascript">
		// initialize jQTouch with defaults
    var jQT = $.jQTouch();
            
    function getContacts(){
      debug.log("getContacts");
      var fail = function(){};
      
      // for simplicity just get all contacts.
      navigator.ContactManager.getAllContacts(getContacts_callback, fail, null);
    };
    	
    function getContacts_callback(contactsArray)
    {
      var ul = $('#contacts');
      // remove any existing data as we resuse this function to update contact list
      ul.find("li").remove();
    
      for (var i = 0; i < contactsArray.length; i++) {
				var contact = contactsArray[i];
    		var li = $("<li><a href='#'>"+contact.name+'</a></li>');
				li.find('a').bind('click', function(e) {showContact(contact.recordID);});
    		ul.append(li);
      }
    };
    
		function showContact(contactId) 
		{
			var options = { allowsEditing: true };
			navigator.ContactManager.displayContact(contactId, null, options);
      $('a').removeClass('loading active');
			return false;
		}
    
		function submitForm() {
			var contact = {};

			contact.firstName = $('#first_name').val();
			contact.lastName = $('#last_name').val();

			navigator.ContactManager.newContact(contact, getContacts, {
			    'gui': false
			});

			jQT.goBack();
			$('#add form').reset();
			return false;
		};

    function preventBehavior(e) { 
      e.preventDefault(); 
    };

    PhoneGap.addConstructor(function(){
			// show initial data
			getContacts();
			
			// hook the add form
			$('#add form').submit(submitForm);
			$('#add .whiteButton').click(submitForm);
			
      document.addEventListener("touchmove", preventBehavior, false);
      document.addEventListener('orientationChanged', function(e) { debug.log("Orientation changed to " + e.orientation); }, false);
    });
    
    </script>
  </head>
  <body>
    <div id="home">
     <div class="toolbar">
        <h1>Contacts</h1>
  			<a class="button add slideup" href="#add">+</a>
      </div>
      <ul id="contacts" class="edgetoedge">
      </ul>
    </div>
    <div id="add">
        <form>
            <div class="toolbar">
                <h1>New Contact</h1>
                <a href="#" class="cancel back">Cancel</a>
            </div>
            <ul class="edit rounded">
              <li><input type="text" name="first_name" placeholder="First Name" id="first_name" /></li>
              <li><input type="text" name="last_name" placeholder="Last Name" id="last_name" /></li>
              <li><input type="text" name="email_address" placeholder="Email Address" id="email_address" type="email" /></li>
              <li><input type="text" name="business_number" placeholder="Business Number" id="business_number" type="tel" /></li>

            </ul>
            <a href="#" class="whiteButton" style="margin: 10px">Add</a>
        </form>
    </div>
  </body>
</html>
